<template>
  <div class="showAgreen">
    <el-dialog v-model="show" title="RANYU用户信息保护政策和RANYU用户注册与服务协议" center>
      <div class="showWrap" @scroll="handleScroll">
        <vue-office-docx v-for="item in fileArr" :key="item.id" :src="item.url" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" color="#6861ff" :disabled="isAgreen" @click="acceptButton">
            我已阅读
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, ref, onMounted, defineExpose } from "vue";
import VueOfficeDocx from "@vue-office/docx";
import OfficialApi from "@/api/officel";
const show = ref(false);
const emits = defineEmits(["agreen"]);
const fileArr = ref(); //协议文件
onMounted(async () => {
  // 页面首次加载，获取文件
  (async () => {
    const file = await OfficialApi.getAgreen();
    fileArr.value = file;
  })();
});
//关闭协议框
const closeAr = () => {
  show.value = false;
};
//打开协议框
const openAr = async () => {
  show.value = true;
};
//同意协议
const acceptButton = () => {
  closeAr();
  emits("agreen"); //通知页面已同意协议并勾选
};
const isAgreen = ref<boolean>(true);
const canCheck = ref<boolean>(false); //控制用户强制看完协议
const handleScroll = (e: any) => {
  const div = e.target;
  const { scrollTop, clientHeight, scrollHeight } = div;

  // 判断是否滚动到底部
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    isAgreen.value = false;
    canCheck.value = true;
    // 10 是一个缓冲值
  }
};
defineExpose({
  fileArr,
  closeAr,
  openAr,
});
</script>

<style lang="scss" scoped>
// .showAgreen {
//   height: 70vh;
//   width: 80vw;
// }
.showWrap {
  height: 70vh;
  overflow: scroll;
  scrollbar-width: none;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
::v-deep .docx-wrapper {
  // padding: 0 !important;
  background: #eaeaea !important;
}
:deep(header) {
  height: 85px;
  line-height: 85px;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 2px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0px;
}
.skeleton-loading {
  padding: 20px;
}
.skeleton-line {
  height: 20px;
  background: #f0f0f0;
  margin-bottom: 10px;
  border-radius: 4px;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
</style>
